<template>
  <div class="login">
    <div id="tangk" class="tangk">
      <p>登录成功！即将进入首页....</p>
    </div>
    <div id="zm" class="zm"></div>
    <div>
      <!-- 头部登录标题 -->
      <div class="header">
        <div>
          <a href="javascript:history.go(-1)"
            ><img id="back" src="img/返回.png" alt=""
          /></a>
        </div>
        <span>登录</span>
        <router-link to="/register"> 注册 </router-link>
      </div>
      <!-- 输入框 -->
      <div class="search">
        <div>
          <input id="text" type="text" v-model="namePhone" @blur="input1($event)" placeholder="请输入手机号/用户名" autofocus/>
          <span class="span1">{{ts1}}</span>
        </div>
        <div class="mima">
          <input id="pwd" :type="type" v-model="mima" @blur="input2($event)" placeholder="请输入密码" maxlength="6"/>
          <span ><img :src="img" alt="" id="yan" @click="yan()" /></span>
          <span class="span2">{{ts2}}</span>
        </div>
      </div>
      <!-- 忘记密码 -->
      <div class="wang">
        <a href="#">
          <p>忘记密码?</p>
        </a>
      </div>
      <!-- 登录按钮 -->
      <div class="denglu">
        <button id="btn" @click="btn">登录</button>
      </div>
      <!-- 第三方登录 -->
      <div class="san">
        <h2>第三方登录</h2>
      </div>
      <!-- 小图标 -->
      <div class="box">
        <div class="box-icon">
          <img src="img/zfb.png" alt="" />
          <img src="img/vx.png" alt="" />
          <img src="img/wb.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 弹框提示 -->
    <div id="tangk" class="tangk" v-bind:style="{ display: blockNone }">
      <p>登录成功！</p>
      <p>正在进入主页面...</p>
    </div>
  </div>
</template>
<style  scoped>
.login {
  width: 100%;
  background-color: #f7f7f7;
  position: relative;
  min-height: 667px;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: black;
}
/* 删除历史搜索记录弹出框 */
#tangk {
  clear: both;
  width: 224px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 10;
  background-color: white;
  padding: 0.213333rem 0.426667rem;
  font-size: 0.373333rem;
  color: red;
}
/* 遮幕 */
.zm {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 7;
}

/* 头部登录标题 */
.header {
  width: 100%;
  height: 1.173333rem;
  line-height: 1.173333rem;
  display: flex;
  justify-content: space-around;
  background-color: white;
}
.header span {
  width: 70%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.header div img {
  width: 0.533333rem;
}
.header a {
  font-size: 0.373333rem;
  color: #aaa;
}
/* 输入框 */
.search {
  padding-top: 0.533333rem;
}
.search div {
  position: relative;
  margin-bottom: 20px;
}
.search div span{
  position: absolute;
  left: 22px;
  top: 44px;
  color: red;
  font-size: 0.32rem;
}
.search div input {
  width: 100%;
  /* height: 1.333333rem; */
  border: none;
  margin-top: 0.133333rem;
  padding: 17px 20px ;
  outline: none;
  font-size: 16px;
}
.search div span img {
  width: 20px;
  z-index: 10;
  position: absolute;
  left:320px;
  top: -15px;
}
.mima {
  /* display: inline-block; */
  position: relative;
}

/* 忘记密码 */
.wang {
  padding-top: 0.426667rem;
}
.wang a p {
  padding-left: 0.533333rem;
  font-size: 0.341333rem;
  color: #bbbbbb;
}
/* 登录按钮 */
.denglu {
  margin-top: 0.853333rem;
  width: 100%;
  text-align: center;
}
.denglu button {
  width: 90%;
  height: 1.2rem;
  font-size: 0.469333rem;
  /* background-color: #FF6849; */
  background: rgb(240, 65, 85);
  border: none;
  border-radius: 0.085333rem;
  color: white;
}
/* 第三方登录 */
.san {
  width: 100%;
  position: relative;
  text-align: center;
  padding-top: 1.066667rem;
}
.san h2 {
  width: 3.2rem;
  font-size: 0.362667rem;
  color: #cccccc;
  z-index: 5;
  margin: 0 auto;
  background: #f7f7f7;
  position: relative;
}
.san:after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0.266667rem;
  left: 0.266667rem;
  width: 95%;
  height: 0.026667rem;
  border-bottom: 1px solid #cccccc;
}
/* 小图标 */
.box {
  width: 100%;
  padding-top: 0.853333rem;
  display: flex;
  justify-content: center;
}
.box-icon {
  width: 60%;
  display: flex;
  justify-content: space-between;
}
.box-icon img {
  width: 1.066667rem;
}
.zhezhe {
  width: 100%;
  height: 100%;
}
#user {
  position: absolute;
  font-size: 0.373333rem;
  top: 1.333333rem;
  left: 0.506667rem;
  color: red;
}

a:hover {
  -webkit-tap-highlight-color: transparent;
}
/* 弹框提示 */
/* .tangk{
    display: none;
} */
.tangk p {
  text-align: center;
  margin-bottom: 10px;
}
.tangk {
  clear: both;
  width: 240px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3%;
  position: fixed;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: white;
  font-size: 16px;
  color: blue;
  background: purple;
}
</style>
<script>
export default {
  name: "my",
  data() {
    return {
      type:"password",  //密码input的type
      img:"img/眼睛.png",
      blockNone: "none",  //弹框显示隐藏
      namePhone:"",      //用户名或者手机号
      mima:"" ,           //密码
      ts1:"",
      ts2:""
    };
  },
  methods: {
    yan(){
          if(this.type=="password"){
            this.type="text"
            this.img="img/眼睛2.png"
          }else{
            this.type="password";
            this.img="img/眼睛.png";
          }
          
      },
    input1(e){
          if(e.target.value.trim()==''){
              this.ts1='用户名不能为空';
          }else{
              this.ts1='';        
          }
    },
    input2(e){
          if(e.target.value.trim()==''){
              this.ts2='密码不能为空';
          }else{
              this.ts2='';        
          }
    },
    //登录
    btn() {
      if(this.namePhone.trim()==''){
          this.ts1='用户名不能为空';
      }else{
        if(this.mima.trim()==''){
          this.ts2='密码不能为空';
        }else{
          const obj={namePhone:this.namePhone,password:this.mima};
              this.$axios.post('http://118.178.184.210:3000/login',obj).then((data)=>{
                //console.log(data)
                if(data.status==200){
                    if(data.data.code==200){
                      //可以登录
                        this.ts1='';
                        this.ts2='';
                      //本地缓存登录用户信息
                      //console.log(data.data.user)
                      //console.log(data.data.shop)
                      localStorage.setItem("user",data.data.user)
                      //本地缓存用户购物车信息
                      localStorage.setItem("shop",JSON.stringify(data.data.shop))
                      //本地缓存用户收获地址信息
                      localStorage.setItem("address",JSON.stringify(data.data.address))
                      /*  */
                       this.blockNone = "block";
                       setTimeout(() => {
                          this.blockNone = "none";
                          this.$router.push({ path: "/index" });
                       }, 2000);
                      //
                    }else{
                      if(data.data.code==400){
                        //用户名或手机号不正确
                        this.ts1=data.data.msg;
                      }else if(data.data.code==401){
                        //密码不正确
                        this.ts2=data.data.msg; 
                      }
                                               
                    }
                }						
			  }).catch(function(err){
				console.log(err);
		      })
        }
      }
      
    },
  },
  components: {},
};
</script>